<template>
 <div class="header-swiper bgcolor">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in SwiperList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
 </div>
</template>


<script>

export default {
  name: 'Home',
  props: ['SwiperList'],
  data () {
    return {
      swiperOptions: {
        pagination: {
        // 小圆点
         el: '.swiper-pagination'
        },
        //  轮播
        loop: true,
        // 自动轮播
        autoplay: {
          //  间隔时间
          delay: 1500,
          disableOnInteraction: false
        },
        // 轮播速度
        speed: 1000
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .header-swiper {
    // 解决网慢掉块情况
    background-color: #ccc;
    height: 0rem;
    padding-bottom: 26.67%;

    img {
      height: 1rem;
      width: 100%; 
    }
  }
  /deep/ .swiper-pagination-bullet {
    background-color: var(--fontcolor);
  }
</style>
